<template>
  <view class="index-content">
    <!-- 原有模板内容 -->
    <view class="index-block">
      <view class="charts-box">
        <qiun-data-charts 
          type="tline"
          :opts="lineopts"
          :chartData="lineData"
        />
      </view>	
      <view class="charts-box">
        <qiun-data-charts 
          type="area"
          :opts="areaopts"
          :chartData="areaData"
          tooltipFormat="tooltipDemo1"
        />
      </view>
      <!-- 其他模板内容 -->
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

let _now = new Date();
// 定义 now_time 的类型
interface NowTime {
  year: number;
  month: number;
  day: number;
}
// 初始化 now_time 对象
let now_time: NowTime = {} as NowTime;
now_time.year = _now.getFullYear();
now_time.month = _now.getMonth() + 1;
// 修改为 getDate() 以获取正确的日期
now_time.day = _now.getDate();

// 初始化数据
const lineData = ref<{ series: { name: string; data: [number, number][]; }[] }>({} as any);
const areaData = ref<{ categories: string[]; series: { name: string; data: number[]; }[] }>({} as any);
const lineopts = ref({
  dataLabel: false,
  yAxis: {
    data: [
      {
        min: -50,
        max: 50
      }
    ]
  }
});
const areaopts = ref({
  dataLabel: false,
  color: ["#ff0024"],
  yAxis: {
    splitNumber: 4,
    data: [
      {
        min: 1,
        max: 5,
        format: "yAxisDemo3",
      }
    ]
  },
  extra: {
    area: {
      type: "step",
      opacity: 0.3,
      addLine: true,
      width: 2,
      gradient: false,
      activeType: "hollow"
    }
  }
});
const isCanvas2d = ref(true);
const delayload = ref(false);
const historyData = ref({
  "categories": [
    "1月",
    "2月",
    "2月",
    "4月",
    "5月"
  ],
  "series": [
    {
      "name": "收入情况",
      "data": [1601, 1840.5, 1900, 1760, 1500.85],
      "type": "line",
      "style": "curve",
      "color": "#4ECDB6",
      "unit": ""
    }
  ],
  "yAxis": [
    { "calibration": true, "position": "left", "title": "单位/元", "titleFontSize": 12, "unit": "", "tofix": 0, "min": 0, "disableGrid": true }
  ]
});
const detail_list = ref([
  { date: now_time.month + "-01", time: "11:01", type: "extend", money: "10.00", desc: "银行卡转出" },
  { date: now_time.month + "-01", time: "13:45", type: "income", money: "18.00", desc: "银行卡收入" },
  { date: now_time.month + "-02", time: "06:21", type: "extend", money: "123.45", desc: "信用卡转出" },
  { date: now_time.month + "-03", time: "07:38", type: "income", money: "23.00", desc: "银行卡收入" },
  { date: now_time.month + "-08", time: "16:28", type: "extend", money: "23.56", desc: "信用卡转出" },
  { date: now_time.month + "-09", time: "15:25", type: "income", money: "850.12", desc: "银行卡收入" },
  { date: now_time.month + "-09", time: "18:52", type: "income", money: "1.88", desc: "银行卡收入" },
  { date: now_time.month + "-11", time: "21:12", type: "extend", money: "220.21", desc: "银行卡转出" },
  { date: now_time.month + "-12", time: "13:08", type: "income", money: "32.28", desc: "银行卡收入" },
  { date: now_time.month + "-12", time: "12:41", type: "extend", money: "122.12", desc: "信用卡转出" },
  { date: now_time.month + "-13", time: "17:21", type: "income", money: "10.00", desc: "银行卡收入" },
]);
const pieopts = ref({
  label: {
    show: true,
    position: 'outside',
    formatter: '{b}: {d}%'
  }
});
// 定义 PieDataItem 类型
interface PieDataItem {
  name: string;
  value: number;
}

const pieData = ref<{ series: [{ name: string; data: PieDataItem[] }] }>({
  series: [
    {
      name: '收支占比',
      data: []
    }
  ]
});

// 模拟从服务器获取数据
const getServerData = () => {
  setTimeout(() => {
    try {
      const lineres = {
        series: [
          {
            name: "eeg信号",
            data: [
              [1, -0.08980486], [2, 11.86656005], [3, -5.009513045], [4, 3.18512238], [5, -3.824844176],
              [6, 10.85308639], [7, -13.67815144], [8, 8.122799903], [9, -6.74691901], [10, 0.71552101], [11, 7.854071509],
              [12, -8.240731193], [13, 0.44014832], [14, 3.078094235], [15, 2.324649857], [16, -5.00606922], [17, -1.411413866],
              [18, 3.287314267], [19, 4.602246056], [20, -7.602620371], [21, 0.409318354], [22, 5.371725693], [23, -1.707822165], [24, -6.048236962],
              [24, 2.870973262], [25, 8.815812402], [26, -8.446993843], [27, -0.367218287], [28, 0.905251565], [29, 8.573349014], [30, -11.71735084]
            ]
          }
        ]
      };
      const areares = {
        categories: ["0", "30", "90", "120", "150", "180"],
        series: [
          {
            name: "睡眠分期结果",
            data: [1, 2, 4, 4, 3, 2]
          }
        ]
      };
      lineData.value = JSON.parse(JSON.stringify(lineres));
      areaData.value = JSON.parse(JSON.stringify(areares));

      // 计算收支占比
      let incomeTotal = 0;
      let expendTotal = 0;
      detail_list.value.forEach(item => {
        if (item.type === 'income') {
          incomeTotal += parseFloat(item.money);
        } else {
          expendTotal += parseFloat(item.money);
        }
      });
      // 使用明确的类型
      pieData.value.series[0].data = [
        { name: '收入', value: incomeTotal } as PieDataItem,
        { name: '支出', value: expendTotal } as PieDataItem
      ];
    } catch (error) {
      console.error('获取数据失败:', error);
    }
  }, 500);
};

// 页面加载完成后获取数据，将 onReady 改为 onMounted
onMounted(() => {
  getServerData();
});
</script>

<style lang="scss" scoped>
/* 原有样式内容 */
.charts-box {
  width: 100%;
  height: 300px;
}
.index-content {
  background-color: #f3f4f6;
  min-height: 100vh;
}
/* 其他样式内容 */
</style>